<script setup lang='ts' name="import-goods">
import type { VxeGridProps } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import { useGetProductCategory, useGetProductSkuPage } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'

const emits = defineEmits(['confirm'])

const { data: categoryTreeData } = useGetProductCategory()

const categoryProps = { children: 'children', emitPath: false, label: 'categoryName', value: 'id' }

const visible = defineModel<boolean>('visible', { required: true })

const categorySearch = ref<string>('')
const inputProductName = ref<string>('')

const searchText = ref<string>('')
const searchCategoryId = ref<string>('')
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const getProductSkuPageParams = computed(() => ({
    categoryId: searchCategoryId.value,
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    skuName: searchText.value,
}))

const { data: productSkuPageData, isLoading: isGetProductSkuPageLoading, total: productSkuTotal } = useGetProductSkuPage(getProductSkuPageParams)

// #region Table
const tableRef = ref()
const isTableLoading = computed(() => isGetProductSkuPageLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { type: 'checkbox', width: 50 },
        { field: 'skuName', slots: { default: 'sku_name' }, title: '商品' },
        { field: 'brandName', title: '品牌' },
        { field: 'productModel', title: '型号' },
        { field: 'attribute', title: '规格属性' },
        { field: 'productUnit', title: '单位' },
        { field: 'categoryPath', title: '产品类目' },
    ],
    rowConfig: {
        keyField: 'skuId',
    },
})

watchEffect(() => {
    tablePage.total = productSkuTotal.value
})
// #endregion

// #region UI Listener
function onSearchBtnClick() {
    searchText.value = inputProductName.value
    searchCategoryId.value = categorySearch.value
}

function onCancelBtnClick() {
    visible.value = false
}

function onSubmitBtnClick() {
    const $table = (tableRef.value as any)?.tableInstance
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        emits('confirm', selectRecords)
    }
    visible.value = false
}
// #endregion
</script>

<template>
    <PlusDialog v-model="visible"
                title="引入商品"
                width="1000"
                close-on-press-escape
    >
        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="tablePage"
                     :loading="isTableLoading"
                     :data="productSkuPageData"
        >
            <template #toolbar_buttons>
                <div class="mb-12 flex w-full justify-end">
                    <el-cascader v-model="categorySearch"
                                 class="!w-300"
                                 :options="categoryTreeData"
                                 :props="categoryProps"
                                 clearable
                                 placeholder="请选择产品类目"
                    />

                    <el-input v-model="inputProductName"
                              class="!w-300"
                              placeholder="请输入产品名称进行搜索"
                    >
                        <template #append>
                            <SubmitBtn :icon="Search"
                                       style="background: #da0004; color:#fff"
                                       class="w-40 !pl-12"
                                       @click="onSearchBtnClick"
                            />
                        </template>
                    </el-input>
                </div>
            </template>

            <template #sku_name="{ row }">
                <span class="text-blue-600">{{ row.skuName }}</span>
            </template>
        </SearchTable>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="onCancelBtnClick">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           @click="onSubmitBtnClick"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
    width: 40px;
    padding: 0;
}
</style>
